<template>
  <div class="commodity_box">
    <div class="recommend">
      <div class="hd">热卖推荐</div>
      <div class="mo">
        <div v-for="(item,index) in recommendList" :key="`recommendList_${index}`">
          <img :src="item.imageUrl" alt="" />
          <div class="main">
            <div class="name">{{ item.name }}</div>
            <div class="price">￥{{ item.unitPrice }}</div>
            <div class="buy">立即抢购</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div class="list" v-if="list.length">
      <itemBox v-for="val in list" :defaultValue="val" :key="val.id"></itemBox>
    </div>
    <div v-else class="list1">
      <el-empty description="相关花束暂未上架，敬请期待！"></el-empty>
    </div>
  </div>
</template>
<script>
import itemBox from "@/components/listItem/item.vue";
import { getRubbishList } from '../../api/dashboard'
export default {
  name: "Commodity",
  components:{ itemBox },
  data() {
    return {
      recommendList: [
        {
          name: "1222222222222",
          unitPrice: "235",
          imageUrl:
            "https://gd-hbimg.huaban.com/14ec61c89bb5f15499cf93974220e9be043fe098be3f-RTZ2y4",
        },
        {
          name: "爱恋永存.19枝白玫瑰，搭配适量尤加利",
          unitPrice: "236",
          imageUrl:
            "https://gd-hbimg.huaban.com/abd520678674175309410471bd137d112ce3d124f04d1-nR6hcd",
        },
        {
          name: "3爱恋永存.19枝白玫瑰，搭配适量尤加利wwww",
          unitPrice: "237",
          imageUrl:
            "https://gd-hbimg.huaban.com/abd75939c7844e7841849f5578b10683bc94f6c6182d8-VuI3Tv",
        },
        {
          name: "4",
          unitPrice: "237",
          imageUrl:
            "https://gd-hbimg.huaban.com/abd75939c7844e7841849f5578b10683bc94f6c6182d8-VuI3Tv",
        },
      ],
      currentPage1:  1,
      list: [],
      input: {},
      total: 0
    };
  },
  created() {
    if (this.$route.query && this.$route.query.name) {
      //常规搜索
      this.input.name = this.$route.query.name
    }
    if (this.$route.query && this.$route.query.tagTitle) {
      //tag搜索
      this.input.tagTitle = this.$route.query.tagTitle
    }
    this.queryRubbishList(this.currentPage1)
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.queryRubbishList(val)
    },
    queryRubbishList(current = 1){
      getRubbishList({size:8,current,input: this.input}).then(res=>{
        this.list = res.data.records || []
        this.total = Number(res.data.total)
        this.currentPage1 = res.data.current
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.commodity_box {
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  .recommend {
    width: 80vw;
    background-color: #f9f9f9;
    height: 152px;
    margin-bottom: 15px;
    padding-left: 70px;
    position: relative;
    display: flex;
    align-items: center;
    .hd {
      color: rgb(255, 97, 56);
      font-family: 微软雅黑;
      font-size: 14px;
      height: 100px;
      left: 20px;
      line-height: 18px;
      position: absolute;
      text-align: center;
      top: 0px;
      width: 30px;
      background: url("../../assets/image/bg1.png") 0px 0px no-repeat scroll;
      padding: 5px 10px 0px 5px;
    }
    .mo {
      float: left;
      height: 145px;
      width: 100%;
      margin-bottom: 15px;
      margin-right: 10px;
      overflow: hidden;
      padding: 11px;
      display: flex;
      justify-content: center;
      >div {
        background-color: #fff;
        width: calc((100% - 60px) / 4);
        margin-right: 15px;
        display: flex;
        img {
          width: 50%;
        }
        .main{
          width: 50%;
          padding: 5px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          >div{
            margin-bottom: 5px;
          }
          .name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical; // 从上到下垂直排列子元素
            -webkit-line-clamp: 2; // 显示两行内容
          }
          .price{
            color: #ff6138;
            font-size: 1.2em;
            font-weight: 800;
            text-align: center;
          }
          .buy{
            color: #FF734C;
            border: 1px solid #ff734c;
            display: inline-block;
            padding: 0 10px;
            margin-top: 4px;
            background: #FFF0EC;
            border-radius: 20px;
            text-align: center;
          }
        }
        
      }
    }
  }
  .pagination{
    width: 80vw;
    text-align: right;
  }
  .list,.list1{
    display: flex;
    width: 80vw;
    margin: 15px auto;
    min-height: 20vh;
  }
  .list1{
    justify-content: center;
    align-items: center;
  }
}
</style>
